<template>
    <!-- pages/activitydetails/index.wxml -->
    <view class="page">
        <view class="bg">
            <image :src="mealObj.cover"></image>
        </view>
        <view class="buy">
            <view>{{ mealObj.title }}</view>
            <view>销量：{{ mealObj.number }}</view>
        </view>
        <view class="expand">
            <view class="explaintext mb-10">拓客卡介绍：</view>
            <view class="explaintext2">1、购买套餐不支持优惠券；</view>
            <view class="explaintext2">2、套餐购买成功后，将以套餐券的形式发放至账户 个人中心优惠券中</view>
            <view class="explaintext2">3、预约美发师下单，每次仅能使用一张套餐券，套 餐仅限该美发师使用</view>
        </view>
        <view class="explain">
            <view class="explaintext">拓客相关说明：</view>
            <view>
                <view class="explaintext1">套餐有效期</view>
                <view class="explaintext2">套餐自购买成功开始生效，有效期：永久有效</view>
            </view>
            <view>
                <view class="explaintext1">使用说明</view>
                <view class="explaintext2">在个人中心优惠券中使用套餐券直接下单预约</view>
            </view>
            <view>
                <view class="explaintext1">规则提醒</view>
                <view class="explaintext2">1、购买套餐不支持优惠券；</view>
                <view class="explaintext2">2、套餐购买成功后，将以套餐券的形式发放至账户个人中心优惠券中</view>
                <view class="explaintext2">3、预约美发师下单，每次仅能使用一张套餐券，套餐仅限该美发师使用</view>
            </view>
            <view>
                <view class="explaintext1">退款须知：</view>
                <view class="explaintext2">1、本套餐券支持退款</view>
                <view class="explaintext2">2、若无使用，则按支付价格全部退回；…</view>
                <view class="explaintext2">3、预约美发师下单，每次仅能使用一张套餐券…</view>
            </view>
        </view>
        <view class="buybtn" @tap="goBuy">立即购买</view>
    </view>
</template>

<script>
// pages/activitydetails/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            marginBottom: app.globalData.marginBottom,
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            mealObj: null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        _request
            .get('/maker/getActivity', {
                id: options.id,
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    mealObj: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 购买创客
        goBuy() {
            uni.navigateTo({
                url: '/pages/maker/buymaker/pay/index'
            });
        }
    }
};
</script>
<style>
/* pages/activitydetails/index.wxss */
page {
    height: 100%;
    width: 100%;
    background: #fbfbfb;
}

.page {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* 背景 */
.bg {
    width: 100%;
    height: 448rpx;
}

.bg > image {
    width: 100%;
    height: 448rpx;
}

/* 销量 */
.buy {
    width: 710rpx;
    height: 184rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 10rpx 34rpx 64rpx;
}

.buy view:nth-child(1) {
    width: 612rpx;
    height: 100rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
}

.buy view:nth-child(2) {
    width: 100%;
    text-align: right;
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    margin-top: 10rpx;
}

/* 拓展 */

.expand {
    width: 710rpx;
    height: 364rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin-top: 20rpx;
    padding: 38rpx 48rpx 0 48rpx;
    box-sizing: border-box;
}

.mb-10 {
    margin-bottom: 20rpx;
}

/* 使用说明 */
.explain {
    width: 710rpx;
    height: 854rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 38rpx 48rpx 0 48rpx;
}

.explaintext {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.explaintext1 {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
    margin: 20rpx 0 10rpx 0;
}

.explaintext2 {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    line-height: 44rpx;
}

/* 按钮 */
.buybtn {
    width: 670rpx;
    height: 84rpx;
    background: #ff8722;
    border-radius: 21px;
    color: white;
    text-align: center;
    line-height: 84rpx;
    margin-top: 6rpx;
    margin-bottom: 30rpx;
}
</style>
